<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title th:text="#{cas.mfa.googleauth.pagetitle}">Google Authentication Registration Review View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body id="cas">
<main role="main" class="container mt-3 mb-3">
    <div layout:fragment="content" class="uk-flex uk-flex-center">
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title uk-margin-remove" th:text="#{screen.authentication.gauth.register}">Your account is not
                registered.</h3>
            <div class="uk-card-body uk-padding-remove">

                <!-- Confirmation Dialog -->
                <div class="mdc-dialog" id="confirm-reg-dialog" role="alertdialog"
                     aria-modal="true" aria-labelledby="notif-dialog-title" aria-describedby="notif-dialog-content">
                    <form method="post" id="fm1" class="fm-v clearfix" th:action="@{/login}">
                        <div class="mdc-dialog__container">
                            <div class="mdc-dialog__surface uk-padding-small">
                                <h1 class="mdc-dialog__title mt-lg-2" id="notif-dialog-title"
                                    th:utext="#{screen.authentication.gauth.confirm.title}">
                                    Confirm Account Registration
                                </h1>
                                <div class="mdc-dialog__content" id="notif-dialog-content">
                                    <div class="mdc-typography--body1">
                                        <div class="uk-alert-danger" uk-alert style="display: none" id="errorPanel">
                                            <button class="uk-alert-close" type="button" uk-close></button>
                                            <p th:utext="#{screen.authentication.gauth.invalidtoken}">
                                        </div>

                                        <p class="uk-text-meta" th:utext="#{screen.authentication.gauth.confirm.desc}">Description</p>

                                        <input type="hidden" name="_eventId_submit" value="Confirm"/>
                                        <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                                        <input type="hidden" name="geolocation"/>

                                        <section class="cas-field form-group my-3 mdc-input-group">
                                            <div class="mdc-input-group-field mdc-input-group-field-append">
                                                <div class="uk-margin">
<!--                                                    <label class="uk-form-label" for="form-stacked-text">Token*</label>-->
                                                    <div class="uk-form-controls">
                                                        <div class="uk-inline uk-width-1-1">
                                                            <span class="uk-form-icon" uk-icon="icon: lock"></span>
                                                            <input class="uk-input"
                                                                   name="token"
                                                                   id="token"
                                                                   size="25"
                                                                   required
                                                                   autocomplete="off">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="uk-margin  uk-width-1-2 uk-hidden">
                                                    <label class="uk-form-label" for="form-stacked-text">
                                                        <span
                                                                th:utext="#{screen.authentication.gauth.name}">Account Name</span>
                                                    </label>
                                                    <div class="uk-form-controls">
                                                        <div class="uk-inline uk-width-1-1">
                                                            <input class="uk-input" type="text"
                                                                   name="accountName"
                                                                   id="accountName"
                                                                   size="50"
                                                                   autocomplete="off">
                                                        </div>
                                                    </div>
                                                    <script>document.getElementById("accountName").value = randomWord();</script>
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                                <footer class="mdc-dialog__actions">
                                    <button class="uk-button uk-button-primary"
                                            style="margin-right: 8px;"
                                            name="registerButton"
                                            id="registerButton">
                                <span class="mdc-button__label"
                                      th:text="#{screen.welcome.button.register}">注册</span>
                                    </button>
                                    <button type="button"
                                            class="uk-button uk-button-default"
                                            data-mdc-dialog-action="accept" data-mdc-dialog-button-default>
                                        <span class="mdc-button__label">取消</span>
                                    </button>
                                </footer>
                            </div>
                        </div>
                        <div class="mdc-dialog__scrim"></div>
                    </form>

                    <script type="text/javascript">
                        var btn = document.getElementById('registerButton');
                        btn.addEventListener('click', function (event) {
                            var endpoint = $('#fm1').attr('action');
                            event.preventDefault();
                            $('#errorPanel').hide();

                            var formData = $("#fm1").serializeArray();
                            formData.push({
                                name: "validate",
                                value: true
                            });
                            $.post(endpoint, formData)
                                .done(function (data, status, jqxhr) {
                                    $('#errorPanel').hide();
                                    $("#fm1").submit();
                                })
                                .fail(function (data, status, jqxhr) {
                                    $('#errorPanel').show("fast", "swing");
                                });
                        }, false);
                    </script>
                </div>
                <!-- Confirmation Dialog -->


                <h4 class="">扫描二维码</h4>
                <p class="uk-text-meta" th:utext="#{screen.authentication.gauth.key(${key.getSecretKey()})}"></p>
                <!-- Account Information -->
                <div>
                    <img th:src="@{'data:image/jpeg;base64,' + ${QRcode}}"
                         class="uk-width-small uk-card uk-card-default"/>
                </div>
                <h4 th:utext="#{screen.authentication.gauth.text.title}">输入文本</h4>
                <p class="uk-text-meta" th:utext="#{screen.authentication.gauth.text}">Secret key
                    to-->
                    register
                    is...</p>
                <div uk-alert class="uk-text-small uk-text-break" th:text="${key.getSecretKey()}"></div>

                <!--                <table>-->
                <!--                    <tr>-->
                <!--                        <td>-->
                <!--                            <div class="my-2" id="seckeypanel">-->
                <!--                                <p class="uk-text-meta" th:utext="#{screen.authentication.gauth.key(${key.getSecretKey()})}">Secret key to-->
                <!--                                    register-->
                <!--                                    is...</p>-->
                <!--                            </div>-->
                <!--                            <hr>-->
                <!--                            <p th:utext="#{screen.authentication.gauth.code}">Scratch codes:</p>-->
                <!--                            <div class="d-flex align-items-start mb-4">-->
                <!--                                <div class="mdc-chip-set" role="grid" id="scratchcodes">-->
                <!--                                    <div th:each="code : ${key.getScratchCodes()}" class="mdc-chip" role="row">-->
                <!--                                        <div class="mdc-chip__ripple"></div>-->
                <!--                                        <span role="gridcell">-->
                <!--                                  <span class="mdc-chip__text" th:text="${code}">Chip One</span>-->
                <!--                                </span>-->
                <!--                                    </div>-->
                <!--                                </div>-->
                <!--                            </div>-->
                <!--                        </td>-->
                <!--                    </tr>-->
                <!--                </table>-->
                <div class="uk-margin">
                    <div class="uk-form-controls">
                        <div class="uk-inline  uk-width-1-1">
                            <button class="uk-button uk-button-primary uk-width-1-1"
                                    accesskey="l"
                                    id="confirm">
                                下一步
                            </button>
                        </div>
                    </div>
                </div>
                <div class="uk-margin">
                    <div class="uk-form-controls">
                        <div class="uk-inline  uk-width-1-1">
                            <a class="uk-link uk-button uk-padding-remove"
                               accesskey="l"
                               name="cancel"
                               onclick="location.href = location.pathname;"
                               id="cancel" th:text="#{screen.welcome.button.cancel}">
                                返回
                            </a>
                        </div>
                    </div>
                </div>

                <script type="text/javascript">
                    (function (material) {
                        document.addEventListener('DOMContentLoaded', function () {
                            var element = document.getElementById('confirm-reg-dialog');
                            var dialog = material.dialog.MDCDialog.attachTo(element);
                            var btn = document.getElementById('confirm');
                            btn.addEventListener('click', function (event) {
                                dialog.open();
                                event.preventDefault();
                            }, false);
                        });
                    })(mdc);
                </script>
            </div>
        </div>
    </div>
</main>
</body>

</html>
